var swss = {
	ui : {},
	api : {}
};
swss.ui.loading = function(flag) {
	if (flag) {
		$("#mask").mask();
		$("#loading").centerShow();
	} else {
		$("#mask").hide();
		$("#loading").hide();
	}
};

/**
 * 创建头部导航
 */
swss.ui.nav = function() {
	var $btnNav = $("div.nav>a.btn-nav");
	var $menu = $("div.menu");

	var position = "";
	var timer = "";

	// 选中按钮的坐标
	var selIndex = {
		x : -1,
		y : -1
	};

	var createMenu = function(idx) {
		var html = "";

		$(menuData[idx]).each(function(i, val) {

			html += '<a id="btnMenu_'
					+ idx
					+ '_'
					+ i
					+ '" href="'
					+ val["href"]
					+ '" '
					+ ((idx == selIndex.x) && (i == selIndex.y)
							? "class='ui-state-active'"
							: "")
					+ ' ><span class="ui-icon ui-icon-circle-triangle-e" ></span>'
					+ val["text"] + '</a>';
		});
		$menu.html(html);

		var tempId = "";
		$menu.find("a").hover(function() {
					$(this).addClass("ui-state-active");
				}, function() {
					tempId = $(this).attr("id").split("_");

					if ((selIndex.x != parseInt(tempId[1]))
							|| (selIndex.y != parseInt(tempId[2]))) {
						$(this).removeClass("ui-state-active");
					}
				});

		$menu.find("a").click(function() {
			selIndex.x = parseInt($(this).attr("id").split("_")[1]);
			selIndex.y = parseInt($(this).attr("id").split("_")[2]);
			$menu.find("a").removeClass("ui-state-active");
			$(this).addClass("ui-state-active");

			$btnNav.removeClass("ui-state-active").find("span")
					.removeClass("ui-icon-circle-triangle-s");
			$btnNav.eq(selIndex.x).addClass("ui-state-active").find("span")
					.addClass("ui-icon-circle-triangle-s");
			// load mod
			swss.ui.loading(true);
			$("#content").load(menuData[selIndex.x][selIndex.y]["href"], function() {
			
					});
			return false;
		});
	};

	// 已滑出菜单时，按钮idx
	var hoverIdx = -1;
	var tempIdx = -1;
	$btnNav.hover(function() {
				$(this).addClass('ui-state-hover');

				clearTimeout(timer);
				tempIdx = $btnNav.index(this);

				if (hoverIdx != tempIdx) {
					createMenu(tempIdx);
					$menu.hide();
					hoverIdx = tempIdx;
				}

				position = $(this).position();
				$menu.css({
							top : position.top + $(this).outerHeight(true),
							left : position.left
						}).slideDown("fast");
			}, function() {
				$(this).removeClass('ui-state-hover');

				timer = setTimeout(function() {
							$menu.hide();
						}, 200);
			});

	$menu.hover(function() {
				clearTimeout(timer);

			}, function() {
				timer = setTimeout(function() {
							$menu.hide();
						}, 200);
			});
};
